import React from 'react';
import { Modal, Button, Icon } from 'antd';
import {  Map, Polyline, Base, Constants, Marker } from 'rc-bmap';

const { SYMBOL_SHAPE_TYPE } = Constants;
const { Point, Path } = Base;
const { IconSequence } = Polyline;
const { Symbol } = IconSequence;

// 制造测试数据的方法
const renderData = (len) =>(
  Array(len).fill(true).map( (item,index) =>(
      {
        lng: 104 + 0.0001 * index,
        lat: 30,
      }
    )
  )
);
export default class WheelPathMapModal extends React.Component{
  componentDidMount() {
    this.props.onRef(this);
  }
  state = {
    points: []
  };
  //设置定时器  定时器 => 拿到轨迹点数据转化并开始描点
  handleSetInterval = (mapData) => {
    //const { mapData } = this.props;
    const data = mapData.map(item => {
      item.lng = parseFloat(item.lon);
      item.lat = parseFloat(item.lat);
      delete item.lon;
      delete item.tid;
      return item;
    });
    this.setState({ points: data });  // 避免轨迹点数据为[]地图显示异常的问题（会报错）
    let count = 1;
    this.interval = setInterval(() => {
      if(count < data.length){
        this.setState({ points: data.slice(0,count) });
      }
      if (count === data.length) {
        clearInterval(this.interval);
      }
      count++;
    }, 200);
  };
  onClose = () => {
    const { changeVisible } = this.props;
    this.setState({ points: []});
    clearInterval(this.interval);
    changeVisible();
  };
  render(){
    const { visible } = this.props;
    const { points } = this.state;
    return(
      <Modal
        title="行车轨迹查看"
        width="60%"
        visible={visible}
        onCancel={() => this.onClose()}
        footer={[<Button key="back" type="primary" size="default" onClick={() => this.onClose()}>返回</Button>]}
      >
        <div style={{ height:450 }}>
          {
            points .length > 0 ?
                <Map
                  ak="vPQRdvXhY0KXGRsNEW5UCTrFCOMoLziV"
                  zoom={17}
                >
                <Point name={"center"} lng={points[0].lng} lat={points[0].lat} />
                  <Marker>
                    <Point key={"start"} lng={points[0].lng} lat={points[0].lat} />
                  </Marker>
                  <Marker>
                    <Point key={"end"} lng={points[points.length-1].lng} lat={points[points.length-1].lat} />
                  </Marker>
                  <Polyline
                    strokeColor="#18a45b"
                    strokeWeight={10}
                    strokeOpacity={0.8}
                  >
                    <Path>
                      {
                        points.map((item,index) => (
                          <Point key={index} lng={item.lng} lat={item.lat} />
                        ))
                      }
                    </Path>
                  </Polyline>
              </Map>
              : null
          }
        </div>
      </Modal>
    );
  }
}

